<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="Constant.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".flip").click(function(){
                var id = $(this).attr("id");
                var panelString  = "#" + id + "Panel";
                $(panelString).slideToggle("slow");
            });
        });
    </script>
    <style type="text/css">
        div.panel,p.flip
        {
            margin:0px;
            padding:5px;
            text-align:center;
            background:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        div.panel
        {
            height:120px;
            display:none;
        }
    </style>
    <title>武器使用方法</title>
</head>
<body>
    <h1>武器使用方法</h1>
    <p class="flip" id="PSJ">片手剑</p>
        <div class="panel" id="PSJPanel">
            <p>片手剑测试</p>
        </div>
    <p class="flip" id="DJ">大剑</p>
        <div class="panel" id="DJPanel">
            <p>大剑测试</p>
        </div>
    <p class="flip" id="TD">太刀</p>
        <div class="panel" id="TDPanel">
            <p>太刀测试</p>
        </div>
    <p class="flip" id="SSJ">双手剑</p>
        <div class="panel" id="SSJPanel">
            <p>双手剑测试</p>
        </div>
    <p class="flip" id="DC">大锤</p>
        <div class="panel" id="DCPanel">
            <p>大锤测试</p>
        </div>
    <p class="flip" id="SLD">狩猎笛</p>
        <div class="panel" id="SLDPanel">
            <p>狩猎笛测试</p>
        </div>
    <p class="flip" id="CQ">长枪</p>
        <div class="panel" id="CQPanel">
            <p>长枪测试</p>
        </div>
    <p class="flip" id="CHQ">铳枪</p>
        <div class="panel" id="CHQPanel">
            <p>铳枪测试</p>
        </div>
    <p class="flip" id="ZF">斩斧</p>
        <div class="panel" id="ZFPanel">
            <p>斩斧测试</p>
        </div>
    <p class="flip" id="QN">轻弩</p>
        <div class="panel" id="QNPanel">
            <p>轻弩测试</p>
        </div>
    <p class="flip" id="ZN">重弩</p>
        <div class="panel" id="ZNPanel">
            <p>重弩测试</p>
        </div>
    <p class="flip" id="GJ">弓箭</p>
        <div class="panel" id="GJPanel">
            <p>弓箭测试</p>
        </div>
    <p class="flip" id="DF">盾斧/充能斧</p>
        <div class="panel" id="DFPanel">
            <p>盾斧/充能斧测试</p>
        </div>
    <p class="flip" id="CCG">操虫棍</p>
        <div class="panel" id="CCGPanel">
            <p>操虫棍测试</p>
        </div>
</body>
</html>